<template>
	<view class="content">
		<city-select v-model="warehouseSelect" @city-change="cityChange"></city-select>
		<materialStockSelect v-model="itemSelect" @itemSelected="itemSelected"></materialStockSelect>
		<view class="status-text">
			<text>当前工单信息</text>
		</view>
		<u-form class="form-content" :model="info" ref="iForm">
			<u-form-item :border-bottom="false" label-width="30%" label="任务:">
				<text class="form-text">{{info.taskName}}</text>
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="30%" label="客户订单:">
				<text class="form-text">{{info.clientOrderCode}}</text>
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="30%" label="生产工单:">
				<text class="form-text">{{info.workorderCode}}</text>
			</u-form-item>
		</u-form>
		<view class="status-text">
			<text>填写领料申请</text>
		</view>
		<u-form style="margin-left: 2%;" :model="form" ref="uForm">
			<u-form-item style="margin-left: 2%;" label-width="70px" label="领料仓库:" prop="warehouseCode">
				<view @click="warehouseSelect=true">
					{{ form.warehouseLabel ? form.warehouseLabel : '请选择仓库' }}
				</view>
			</u-form-item>
			<uni-list style="margin-left: 2%;" :border="true" v-for="item in form.issueLineList" :key="item.materialStockId">
				<uni-list-item style="background-color: #f3f6f9;" :title="item.itemName" :note="item.unitOfMeasure">
					<template v-slot:body>
						<u-row>
							<u-col :span="24">
								<text>物料信息: {{item.itemInfo}}</text>
							</u-col>
							<u-col :span="24">
								<u-input :focus="true" v-model="item.quantityIssued" placeholder="请填写数量"
									type="number"></u-input>
							</u-col>
						</u-row>
					</template>
					<template v-slot:footer>
						<u-button size="mini" type="error" shape="circle" @click="removeLine(item)">移除</u-button>
					</template>
				</uni-list-item>
			</uni-list>
		</u-form>
		<view style="margin-top: 4%;">
			<u-row>
				<u-col>
					<u-button class="btn-gap" type="info" shape="circle" @click="itemSelect=true">添加物料</u-button>
					<u-button class="btn-gap" type="success" shape="circle" @click="submit">提交信息</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import citySelect from '@/components/citySelect/u-city-select.vue';
	import itemSelect from '@/components/itemSelect/itemSelect.vue'
	import {addIssueTask} from '@/api/work/issue/issue.js'
	export default {
		components: {
			citySelect,
			itemSelect
		},
		data() {
			return {
				info: {
					workorderCode: null,
					clientOrderCode: null,
					taskName: null
				},
				form: {
					warehouseLabel: '',
					warehouseId: null,
					warehouseName:null,
					warehouseCode: null,
					locationId: null,
					locationName: null,
					locationCode: null,
					areaId: null,
					areaName: null,
					areaCode: null,
					workorderCode: null,
					workorderId: null,
					issueLineList: []
				},
				warehouseSelect: false,
				itemSelect: false,
				issueLine: {
					itemInfo: null
				}
			};
		},
		onLoad(options) {
			let eventChannel = this.getOpenerEventChannel();
			let that = this;
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.info.taskName = data.taskName;
				that.info.workorderCode = data.workorderCode;
				that.info.clientOrderCode = data.clientOrderCode;
				that.form.workorderCode = data.workorderCode;
				that.form.workorderId = data.workorderId;
			});
		},
		methods: {
			/** 
			 * 提交
			 */
			submit() {
				addIssueTask(this.form).then(res => {
					let url = `/pages/work/issue/detail/result`;
					this.$tab.navigateTo(url);
				});
			},
			/**
			 * 移除物料
			 */
			removeLine(item) {
				this.form.issueLineList = this.form.issueLineList.filter(f => f.materialStockId !== item.materialStockId);
			},
			/**
			 * 选择仓库
			 */
			cityChange(e) {
				this.form.warehouseLabel = this.getWarehouse(e);
			},
			/**
			 * 选择物料
			 */
			itemSelected(e) {
				// 拷贝属性
				this.issueLine = {};
				this.$copyProperties(e, this.issueLine, 'itemName', 'itemCode', 'itemId', 'unitOfMeasure',
					'specification','materialStockId','warehouseId','warehouseCode','warehouseName','locationId','locationCode','locationName',
					'areaId','areaCode','areaName');
				let selected = this.form.issueLineList.filter(f => f.materialStockId === this.issueLine.materialStockId);
				if (this.$isNotEmpty(selected)) {
					this.$toast('不能添加重复物料');
					return;
				}
				this.issueLine.itemInfo =
					`${this.issueLine.itemName} , 单位:${this.$convertUnitmeasure(this.issueLine.unitOfMeasure)} , 规格:${this.$isNotEmpty(this.issueLine.specification)? this.issueLine.specification:''}`
				this.form.issueLineList.push(this.issueLine)
			},
			getWarehouse(e) {
				let label = e.province.label;
				this.form.warehouseId = e.province.id;
				this.form.warehouseName = e.province.label;
				this.form.warehouseCode = e.province.code;
				if (e.city && e.city.label) {
					label += '-' + e.city.label;
					this.form.locationCode = e.city.code;
					this.form.locationName = e.city.label;
					this.form.locationId = e.city.id;
				}
				if (e.area && e.area.label) {
					label += '-' + e.area.label;
					this.form.areaCode = e.area.code;
					this.form.areaName = e.area.label;
					this.form.areaId = e.area.id;
				}
				return label;
			}
		}
	};
</script>

<style lang="scss">
	.form-content {
		border-radius: 15px;
		background-color: white;

		.u-form-item {
			margin-left: 3%;
			font-size: 18px;
		}

		.form-text {
			color: #999999;
			text-align: right;
			margin-left: 20%;
		}
	}
</style>